<template>
  <div>
    <h2>条件渲染</h2>
    <div class="mokuai1">
      <!-- key保证他们不会被复用唯一 -->
      <h3 class>如果你允许用户在不同的登录方式之间切换：</h3>
      <template v-if="loginType === 'username'">
        <label>Username</label>
        <input placeholder="Enter your username" key="1" />
      </template>
      <template v-else>
        <label>Email</label>
        <input placeholder="Enter your email address" key="2" />
      </template>
      <button @click="qiehuan">切换</button>
      <h4>
        不推荐同时使用 v-if 和 v-for:
        <br />当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
      </h4>
    </div>
    <h2>列表渲染</h2>
    <div class="mokuai1">
      <h3 class>v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名</h3>
      <ul id="example-1">
        <li v-for="item in items" :key="item.message">{{ item.message }}</li>
      </ul>
      <ul id="example-1">
        <li v-for="item in itemss" :key="item">{{ item }}</li>
      </ul>
    </div>

    <div class="mokuai1">
      <h3 class>v-for 还支持一个可选的第二个参数，即当前项的索引。同时我们可以访问所有父作用域的 property</h3>
      <ul id="example-1">
        <li v-for="(item,index) of itemss" :key="index">{{itemsparent}}-{{index}}-{{ item }}</li>
      </ul>
    </div>
    <div class="mokuai1">
      <h3 class>v-for 来遍历一个对象的 property。</h3>
      <ul id="example-1">
        <li v-for="value in object" :key="value.id">{{ value }}</li>
      </ul>
      <p>或者v-for="(value,name) in object":value就是值,name就是左边的键名,这顺序不能反</p>
      <ul id="example-1">
        <li v-for="(value,name) in object" :key="value.id">{{name}}-{{ value }}</li>
      </ul>
      <p>或者v-for="(value,name,index) in object":value就是值,index还是下标,name就是左边的键名,这三个顺序不能反</p>
      <ul id="example-1">
        <li v-for="(value,name,index) in object" :key="index">{{index}}-{{name}}-{{ value }}</li>
      </ul>
    </div>
    <div class="mokuai1">
      <h3 class>v-for 调用变更方法</h3>
      <ul id="example-1">
        <li v-for="(item,index) of itemss" :key="index">{{itemsparent}}-{{index}}-{{ item }}</li>
      </ul>
      <!-- push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

                pop() 方法用于删除并返回数组的最后一个元素。

                shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

                unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

                splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

                sort() 方法用于对数组的元素进行排序。

      reverse() 方法用于颠倒数组中元素的顺序-->
      <button @click="tianjia">向数组添加 push()</button>
    </div>

    <div class="mokuai1">
      <h3 class>v-for 创建一个计算属性，来返回过滤或排序后的数组</h3>
      <ul id="example-1">
        <li v-for="n in evenNumbers" :key="n.id">{{ n }}</li>
      </ul>
    </div>

    <div class="mokuai1">
      <h3 class>v-for 在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 你可以使用一个方法：</h3>
      <ul v-for="set in sets" :key="set.id">
        <li v-for="n in even(set)" :key="n.id">{{ n }}</li>
      </ul>
    </div>

    <div class="mokuai1">
      <h3 class>v-for 在 v-for 里使用值范围</h3>
      <ul>
        <li>
          <span v-for="n in 10" :key="n.id">{{ n }}</span>
        </li>
      </ul>
    </div>

    <div class="mokuai1">
      <h3 class>
        v-for v-for 与 v-if 一同使用:
        当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用，如下：
      </h3>
      <ul>
        <li v-for="todo in todos" v-if="!todo.isComplete" :key="todo.id">{{ todo }}</li>
      </ul>
    </div>
    <div class="mokuai1">
      <h3
        class
      >v-for 组件使用v-for v 而如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 template) 上。若是todoss有数组则显示数组,否则则显示p的内容</h3>
     
    </div>
  </div>
</template>



<script>
export default {
  data() {
    return {
      loginType: "username",
      itemsparent: "Parent",
      items: [{ message: "Foo" }, { message: "Bar" }],
      itemss: ["dd", "ff"],
      object: {
        title: "How to do lists in Vue",
        author: "Jane Doe",
        publishedAt: "2016-04-10"
      },
      numbers: [1, 2, 3, 4, 5],
      sets: [
        [1, 2, 3, 4, 5],
        [6, 7, 8, 9, 10]
      ],
      todos: [1, 2, 3, 4, 5, 89],
      todoss: []
    };
  },
  methods: {
    qiehuan() {
      if (this.loginType == "username") {
        this.loginType = "";
      } else {
        this.loginType = "username";
      }
    },
    tianjia() {
      // 添加
      this.itemss.push("gg");
    },
    even: numbers => {
      return numbers.filter(function(number) {
        return number % 2 === 0;
      });
    }
  },
  // 计算属性
  computed: {
    evenNumbers() {
      return this.numbers.filter(number => {
        return number % 2 === 0;
      });
    }
  }
};
</script>

<style>
h2 {
  font-size: 30px;
  color: aqua;
}
h4 {
  font-size: 15px;
  color: darkmagenta;
}
</style>